<template>
  <div class="context">
    <!--搜索框-->
    <!-- <el-input style="width: 400px; margin: 20px 20px 20px 20px" v-model="inputValue" placeholder="请输入内容"
      prefix-icon="el-icon-search">
    </el-input> -->
    <div class="cardheard">
      <el-button type="primary" @click="showadd" style="height: 40px; margin: 0px 0px 0px 20px">
        添加路由</el-button>
    </div>


    <template>
      <el-table :data="routers" style="width: 100%" height="80%">
        <!-- <el-table-column label="id">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->


        <el-table-column label="label">
          <template slot-scope="scope">
            <span>{{ scope.row.label }}</span>
          </template>
        </el-table-column>

        <el-table-column label="class">
          <template slot-scope="scope">
            <span>{{ scope.row.t_class }}</span>
          </template>
        </el-table-column>


        <el-table-column label="path">
          <template slot-scope="scope">
            <span>{{ scope.row.path }}</span>
          </template>
        </el-table-column>



        <el-table-column label="操作">

          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.$index, scope.row)" size="small">编辑</el-button>
            <el-button type="text" @click="del(scope.$index, scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">

        <el-pagination 
      @current-change="handleCurrentChange"
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

      </div>
    </template>



<template>
    <el-dialog
      title="添加路由"
      :visible.sync="dialogresetVisible"
      width="30%"
      center
    >
      <el-form :model="newtable">
        <el-form-item label="label" :label-width="formLabelWidth">
          <el-input v-model="newtable.label" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="class" :label-width="formLabelWidth">
          <el-input v-model="newtable.class" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="path" :label-width="formLabelWidth">
          <el-input v-model="newtable.path" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogresetVisible = false">取 消</el-button>
        <el-button type="primary" @click="addusers">确 定</el-button>
      </div>
    </el-dialog>
  </template>



  </div>
</template>

<script>
export default {
  data() {
    return {
       data:[],
      formLabelWidth: "120px",
      newtable:{
        label:"",
        class:"",
        path:"",
      },
      dialogresetVisible:false,
      pagecount: 99,//查询的总数
      currentPage4:4,
      routers: [],//返回用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 10
      }
    };
  },
  
  created() {
    var that = this;
    console.log("Vue 初始化完成 created");
    this.pushdata();
  },
  methods: {
    showadd(){
      this.dialogresetVisible=true
    },

    del(scope,row){
      console.log(row);
      var that = this;
      that.$axios
        .post("/api/Router/DelRouter",{
            id:row.id
        })
        .then(function(response) {
          that.$message({
            message: response.data.mes
          });
        })
        .catch(function(error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });

        that.pushdata()
    },
    addusers(){
     
      for (let index = this.newtable.begin; index < this.newtable.end; index++) {
        var user={
          uid:this.newtable.header+index,
          password:this.newtable.header
        }
        this.data.push(user)
      }
      var that = this;
      that.$axios
        .post("/api/Router/AddRouter",{
          name:that.newtable.path,
          path:that.newtable.path.split('/')[1],
          t_class:that.newtable.class,
          label:that.newtable.label
        })
        .then(function(response) {
          that.dialogresetVisible=false
          that.$message({
            message: response.data.mes
          });
          console.log(response.data);
        })
        .catch(function(error) {
          that.dialogresetVisible=false
          console.log(error);
          that.$message({
            message: "添加失败"
          });
        });
        that.pushdata()

    },
    next(a){
      console.log(a);
    },
    reset() {
    this.req = {
      "pageIndex": 0,//每次请求数据的开始位置
      "pageCount": 10//每次请求数据的总量
    }
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req.pageCount
        this.req.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }

      console.log(this.req);
      this.pushdata()
    },


    edit(){},
    pushdata() {
      var that = this;
      that.$axios.post("/api/Router/ShowRouter")
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.routers = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>

</style>
